<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				
				/* 背景颜色*/
				background-color: red;
				
				/* 背景图片*/
				background-image: url(img/Snip20170413_59.png);
				   
				/* 背景平铺方式
				 * repeat 平铺(默认)
				 * no-repeat 不平铺
				 * repeat-x 水平方向平铺
				 * repeat-y 垂直方向平铺
				 * */
				/* background-repeat: no-repeat; */
				/* background-repeat: repeat-x; */
				
				/* 背景大小*/
				background-size: 80px 80px;
				
				/* 背景位置
				 * 水平方向: left/center/right/数值
				 * 垂直方向: top/center/bottom/数值
				   数值要加px，数值可以是负数
				 * */
				background-position: 10px 30px;
				/* background-position: center center; */
				/* background-position: 50px bottom; */
			}
			
			
			.bt{
				width: 100px;
				height: 30px;
				color: white;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				
				/*背景属性简写
				background-color: #eb7059;
				background-image: url(img/bg.png);
				background-repeat: no-repeat;
				background-position: 10px center;
				
				background:背景颜色 背景图片 平铺方式 定位方式
				
				注意点：
				background属性中，任何一个属性都可以被省略
				*/
				
				background: #eb7059 url(img/bg.png) no-repeat  8px center;
				
			}
		</style>
	</head>
	
	<body>
		<div class="box"></div>
		
		<br />
		<br />
		<div class="bt">
			写文章
		</div>
	</body>
</html>
